<template>
  <div>
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="8">
            <el-form-item label="文件名">
              <el-input
                style="width: 95%"
                v-model="userPageVo.name"
                placeholder="部分/完整昵称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="createTimes"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="margin-right: 10px; width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="fetch()"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetData"
            >重置</el-button
          >
        </el-row>
      </el-form>
    </div>

    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="userList"
        stripe
        border
        fit
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          prop="userName"
          label="账户名"
          width="180"
          align="center"
        />
        <el-table-column prop="name" label="昵称" width="110" align="center" />
        <el-table-column prop="userMailbox" label="邮箱" align="center" />
        <el-table-column prop="userPhone" label="手机号" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="lookAll(scope.row)"
              icon="el-icon-user"
              size="mini"
              >查看</el-button
            >
            <el-button
              type="primary"
              @click="update(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >修改</el-button
            >
            <el-button
              type="danger"
              @click="deleteUser(scope.row)"
              icon="el-icon-delete"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="pageSize"
      :page-sizes="[5,10,15,20]"
      style="padding: 30px 0; text-align: center"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="fetch"
      @size-change="handleSizeChange(val)"
    />
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户编号
          </template>
          {{ this.detailMsg.userId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            用户账号
          </template>
          {{ this.detailMsg.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            密码
          </template>
          {{ this.detailMsg.password }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            手机号
          </template>
          {{ this.detailMsg.userPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            QQ号
          </template>
          {{ this.detailMsg.userQq }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            邮箱
          </template>
          {{ this.detailMsg.userMailbox }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <el-tag>账号状态</el-tag>
          </template>
          {{ this.detailMsg.status }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <el-tag type="success">账号类型</el-tag>
          </template>
          {{ this.detailMsg.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>
            创建时间
          </template>
          {{ this.detailMsg.createTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog :visible.sync="updateDialogVisible" width="30%">
      <el-form ref="form" v-model="formDate" label-width="80px">
        <el-form-item label="账户">
          <el-input v-model="formDate.userName"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formDate.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formDate.password"></el-input>
        </el-form-item>
        <el-form-item label="QQ号">
          <el-input v-model="formDate.userQq"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formDate.userMailbox"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import useApi from "@/api/system/user";
export default {
  data() {
    return {
      updateDialogVisible: false,
      dialogVisible: false,
      listLoading: false,
      userPageVo: {},
      userList: [],
      page: 1,
      pageSize: 8,
      detailMsg: {},
      formDate: {},
      createTimes: [],
      name:"",
      total: 0,
    };
  },
  methods: {
    handleSizeChange(val){
        this.pageSize=val;
    },
    resetData() {
      this.userPageVo = {};
      this.createTimes = [];
      this.fetch();
    },
    fetch() {
      this.userPageVo.createTimeBegin = this.createTimes[0];
      this.userPageVo.createTimeEnd = this.createTimes[1];
      useApi.page(this.page, this.pageSize, this.userPageVo).then((res) => {
        this.userList = res.data.records;
        this.total = res.data.total;
      });
    },
    submitUpdate() {
      console.log("提交修改");
      useApi.update(this.formDate).then((res) => {
        if (res.code === 1) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
      });
      this.updateDialogVisible = false;
    },
    getUserList() {
      useApi.page(this.page, this.pageSize, this.userPageVo).then((res) => {
        this.userList = res.data.records;
        this.total = res.data.total;
      });
    },
    lookAll(row) {
      this.dialogVisible = true;
      this.detailMsg = row;
      console.log(row);
    },
    update(row) {
      this.updateDialogVisible = true;
      console.log(row);
      this.formDate = row;
    },
    deleteUser(row) {
      useApi.delete(row.userId).then((res) => {
        if (res.code === 1) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      });
      this.getUserList();
    },
  },
  created() {
    this.getUserList();
  },
};
</script>

<style>
.el-input {
  width: 250px;
}
</style>